<template>
  <div class="main_spac1">
    <div class="main_white padding10">
      <div class="mainor_form">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="90px"
          id="form"
        >
          <el-form-item label="商品分类：" prop="category_id" class="wid220">
            <el-cascader
              v-model="form.category_id"
              :options="options"
              :props="defaultProps"
              placeholder="请选择"
              @change="search"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="用户分组：" prop="group_id">
            <el-select
              v-model.trim="form.group_id"
              placeholder="用户分组"
              class="wid220"
              @change="search"
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(group, index) in group"
                :key="index"
                :label="group"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <MainFormBtn @reset="reset" @getSearchFor="search" :loading="listLoading" :showBtn="false">
          </MainFormBtn>
        </el-form>
      </div>
      <div class="main-controls-wrap">
        <div>
          <el-button v-repeatClick @click="handleAdd">新增报价</el-button>
        </div>
      </div>
      <div class="main_table">
        <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        element-loading-text="加载中"
        fit
        highlight-current-row
        :height="borderHeight - 36"
      >
        <el-table-column
          label="商品分类"
          prop="category_title"
          align="center"
        />
        <el-table-column
          label="用户分组"
          prop="group.title"
          align="center"
        />
        <el-table-column
          label="基准价"
          prop="range"
          align="center"
        >
          <template slot-scope="scope">
            <span :class="'type' + scope.row.is_config">{{
              scope.row.is_config == 1 ? "按后台配置" : "按市场价"
            }}</span>
          </template></el-table-column
        >
        <el-table-column
          label="基准价范围"
          prop="range"
          align="center"
        />
        <el-table-column
          label="运算方式"
          align="center"
        >
          <template slot-scope="scope">
            <span :class="'type' + scope.row.type">{{
              scope.row.type == 1 ? "乘" : "加"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="（因）加数"
          prop="price"
          align="center"
        />
        <el-table-column
          label="管理操作"
          prop="title"
          align="center"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="handeleEdit(scope.row)"
              >编辑</el-link
            >
            <el-link
              type="danger"
              v-repeatClick
              @click="goodsCategoryOffer_delete(scope.row.id)"
              >删除</el-link
            ></template
          ></el-table-column
        >
        </el-table>
      </div>
      <div class="main_page boxdq">
        <div></div>
        <!-- 分页 -->
        <div class="main_page_r">
          <MainPagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>

    <!-- 新增报价 -->
    <el-dialog
      :title="status == 1 ? '新增报价' : '编辑报价'"
      :visible.sync="addVisible"
      class="main_dialog dialog500"
    >
      <div>
        <el-form
          :inline="true"
          :model="monitorForm"
          :rules="rules"
          class="demo-form-inline"
          ref="ListFrom"
          label-width="120px"
        >
          <el-form-item label="商品分类：" prop="category_id">
            <el-cascader
              v-model="monitorForm.category_id"
              :options="options"
              :props="defaultProps"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="用户分组：" prop="group_id">
            <el-select v-model="monitorForm.group_id" placeholder="用户分组">
              <el-option
                v-for="(group, index) in group"
                :key="index"
                :label="group"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="基准价：" prop="type">
            <el-radio-group v-model="monitorForm.is_config">
              <el-radio :label="1">按后台配置</el-radio>
              <el-radio :label="2">按市场价</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="基准价范围：" prop="price_start">
            <el-input-number
              v-model="monitorForm.price_start"
              :controls="false"
              :min="0"
              :precision="2"
            ></el-input-number>

            <!-- <el-input-number
              v-model="monitorForm.price_end"
              :controls="false"
              :precision="2"
              :min="0"
            ></el-input-number> -->
          </el-form-item>
          <el-form-item label="">
            <el-input-number
              v-model="monitorForm.price_end"
              :controls="false"
              :precision="2"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="运算方式：" prop="type">
            <el-radio-group v-model="monitorForm.type">
              <el-radio :label="1">乘</el-radio>
              <el-radio :label="2">加</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="clearfix"></div>
          <el-form-item label="（因）加数：" prop="price">
            <el-input-number
              v-model="monitorForm.price"
              :controls="false"
              :min="0"
              :precision="3"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="handeleSave">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import {
  goodsCategoryOffer_index,
  goodsCategoryOffer_add,
  goodsCategoryOffer_edit,
  goodsCategoryOffer_delete,
} from "@/api/commodity/commodityGroup";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { recursion, category } from "@/utils/index";
import rules from "@/rules/commodity/commodity_group_category";

export default {
  mixins: [mixins],
  data() {
    return {
      rules,
      // 搜索
      form: {
        pid: "",
        category_id: [],
        group_id: "",
      },

      listLoading: false,
      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      list: [],
      group: {},
      addVisible: false,
      // 新增报价
      monitorForm: {
        category_id: "",
        pid: "",
        group_id: "",
        price_start: "",
        price_end: "",
        type: 1,
        price: "",
        is_config: 1,
      },
      //新增 编辑状态
      status: 1, //1新增  2编辑
    };
  },
  computed: {},

  methods: {
    startGetting() {
      this.search();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.goodsCategoryOffer_index();
    },
    changePage(page) {
      this.current.page = page;
      this.goodsCategoryOffer_index();
    },
    // 搜索
    search() {
      this.current.page = 1;
      this.goodsCategoryOffer_index();
    },
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.current.page = 1;
      this.current.per_page = 20;
      this.goodsCategoryOffer_index();
    },
    // 列表数据
    goodsCategoryOffer_index() {
      this.listLoading = true;
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.current,
        form
      );
      goodsCategoryOffer_index(data).then((res) => {
        if (res.errcode == 0) {
          this.listLoading = false;
          this.options = recursion(res.data.categoryList, false);
          this.group = res.data.group;
          this.totalCount = res.data.list.total;
          res.data.list.data.map((e) => {
            let title_1 = e.categoryp ? e.categoryp.title : "";
            let title_2 = e.category ? e.category.title : "";
            if (title_2) {
              e.category_title = title_1 + " | " + title_2;
            } else {
              e.category_title = title_1;
            }

            e.range = e.price_start + " - " + e.price_end;
          });
          this.list = res.data.list.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    handleAdd() {
      this.status = 1;
      this.monitorForm = {
        category_id: "",
        pid: "",
        group_id: "",
        price_start: "",
        price_end: "",
        type: 1,
        price: "",
        is_config: 1,
      };
      this.addVisible = true;
    },
    // 新增分组
    handeleSave() {
      this.$refs["ListFrom"].validate((valid) => {
        if (valid) {
          if (this.monitorForm.price_start >= this.monitorForm.price_end) {
            this.$message.warning("结束价需要大于起始价");
            return;
          } else {
            switch (this.status) {
              case 1:
                this.goodsCategoryOffer_add();
                break;
              case 2:
                this.goodsCategoryOffer_edit();
                break;
            }
          }
        }
      });
    },
    // 新增分组保存
    goodsCategoryOffer_add() {
      let form = JSON.parse(JSON.stringify(this.monitorForm));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      if (!form.category_id) {
        form.category_id = 0;
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      goodsCategoryOffer_add(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("添加成功");
          this.monitorForm = {
            category_id: "",
            pid: "",
            group_id: "",
            price_start: "",
            price_end: "",
            type: 1,
            price: "",
            is_config: 1,
          };

          this.goodsCategoryOffer_index();
          this.addVisible = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 删除分组
    goodsCategoryOffer_delete(id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id }
      );
      goodsCategoryOffer_delete(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("删除成功");
          this.goodsCategoryOffer_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 编辑分组
    handeleEdit(data) {
      this.status = 2;
      this.monitorForm.type = data.type;
      this.monitorForm.is_config = data.is_config;
      this.monitorForm.price = data.price;
      this.monitorForm.price_start = data.price_start;
      this.monitorForm.price_end = data.price_end;
      this.monitorForm.group_id = String(data.group_id);
      let id1 = data.pid ? data.pid : "";
      let id2 = data.category_id ? data.category_id : "";
      let arr = [id1, id2];
      this.monitorForm.category_id = arr.filter(Boolean);
      this.monitorForm.id = data.id;
      this.addVisible = true;
    },
    goodsCategoryOffer_edit() {
      let form = JSON.parse(JSON.stringify(this.monitorForm));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      if (!form.category_id) {
        form.category_id = 0;
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      this.addVisible = false;
      goodsCategoryOffer_edit(data).then((res) => {
        if (res.errcode == 0) {
          this.$message.success("修改成功");
          this.goodsCategoryOffer_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
  created() {
    this.getNumerical(230);
    this.goodsCategoryOffer_index();
  },
};
</script>

<style lang='scss' scoped>
.type1 {
  color: #03a98e;
}
.type2 {
  color: #118ab2;
}

/deep/ .el-form-item--small.el-form-item {
  margin-bottom: 10px !important;
}
</style>